import React,{useState} from 'react'
import {useHistory} from 'react-router-dom'
import LazyLoad from 'react-lazyload'
import {Container} from './style'
import loading from '../../../assets/images/loading.gif'
import MainPopup from '../../../components/mainpopup/MainPopup'
import './icon.css'


export default function ListData(props) {
    const {item,setCurtain,curtain } = props
    const [cli,setCli]=useState(1);
    const iconChange = () =>{
        if(cli === 1){
            setCli(cli => cli=2);
            item.number3 +=1
        }else{
            setCli(cli => cli=1);
            item.number3 -=1
        }
    }
    const history = useHistory()
    const gotoDetail = (id) =>{
        history.push(`/detail/${id}`)
    }
    const handleOnclick = () => {
        console.log(curtain,'/////');
        if(curtain == 0){
            setCurtain( item.id)
        }else{
            setCurtain(0)
        }
    }
    
    return (
       
        <Container>
            <div className="keep">
                <MainPopup handleOnclick={handleOnclick} curtain={curtain} id={item.id}/>
            </div>
            <div className="title" >
                <LazyLoad placeholder={<img src={loading}  style={{height:"0.8rem",width:"0.8rem" }}/>}>
                    <img  className="title-img" src={item.imgsrc} alt="" />
                </LazyLoad>
                <div className="title-content">
                    <div className="tit-con-top">
                        <p className='type'>{item.name}</p> 
                    </div>
                    <div className="tit-con-bottom">
                     <p className='typef'> 发布于&nbsp;&nbsp;&nbsp;</p> 
                     <p className='typer'>{item.hupuaddress}</p>
                    </div>
                </div>
                <div className="title-bottom">
                    <div className="ListData-iconfont ListData-icon-diandian" onClick={()=>{
            handleOnclick()}}></div>
                </div>
            </div>

            {/* 点击事件 ，前往动态路由界面 */}
            <div className="middle" onClick={() => gotoDetail(item.id)}>
               <div className="middle-title">
                    {item.title}
               </div>
            </div>
            
            <div className="commentLight" onClick={() => gotoDetail(item.id)}>
                        <div className="light">亮评</div>
                        <div className="commentmost">
                           <font color='#9599a0'>{item.commentuser}</font>:
                           <font color='#595959'>{item.commentlight}</font>
                        </div>
                        <LazyLoad placeholder={<img src={loading}  style={{height:"1.5rem",width:"1.5rem" }}/>}>
                        <img className="commentimg" src={item.commentimg}/>
                        </LazyLoad>
            </div>
            <div className="bottom">
                <div className="ListData-iconfont ListData-icon-fenxiang"><p className='sum'>{item.number}</p></div>
                <div className="ListData-iconfont ListData-icon-pinglun" onClick={() => gotoDetail(item.id)}><p className='sum'>{item.number2}</p></div>
                <div className="ListData-iconfont ListData-icon-dianzan" onClick={()=>iconChange()} style={cli===1?{}:{color:'red'} }><p className='sum' style={cli===1?{}:{color:'red'} }>{item.number3}</p></div>
            </div>
            <div className="keep"></div>
        </Container>
    )
}
